<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" th:src="@{/js/jquery-3.3.1.js}"></script>
		<link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet">
		<link th:href="@{/css/myself.css}" rel="stylesheet" type="text/css"/>
		<!--<link th:href="@{/css/pill.css}" rel="stylesheet" type="text/css"/>-->

		<script th:src="@{/bootstrap/js/bootstrap.js} "></script>

		<style>
			/*.tip{width:500px; height:500px; position:absolute;top:20%; left:30%;background:#fcfdfd;box-shadow:1px 8px 10px 1px #9b9b9b;border-radius:5px;behavior:url(js/pie.htc); display:block; z-index:111111;}*/
			.tip{width:500px; height:520px; position:absolute;top:20%; left:30%;background:#fcfdfd;box-shadow:1px 8px 10px 1px #9b9b9b;border-radius:5px; display:block; z-index:111111;}
			.tip_title{ background:#7DECA5 center repeat-x; height:30px;border-radius:5px;}
			.tip_title span { color:black; line-height:30px; padding-left:15px; font-size:12px; float:left;}
			.tip_title a { float:right; width:20px; height:20px; color:#FFF;  display:block; cursor:pointer;}
			.tip_title a:hover{ color:#000; cursor:pointer;}
			.tip_info{width:308px;height:85px; margin:25px auto;}
			.tip_info span img{ float:left;}
			.tip_info p { font-size:12px; color:#000; font-weight:bold; line-height:26px; padding-top:15px;}
			.tip_button{ width:150px;margin: auto; }
			.tip_button button{ width:50px; height:30px; margin-left:10px; cursor:pointer;}
		</style>
		<script type="text/javascript">
			$(document).ready(function() {
				$(".btn btn-warning").click(function() {
					$(".tip").fadeIn(200);
				});

				$(".tip_title a").click(function() {
					$(".tip").fadeOut(200);
				});

				$(".sure").click(function() {
					$(".tip").fadeOut(100);
				});

				$(".cancel").click(function() {
					$(".tip").fadeOut(100);
				});

			});
		</script>

		<script type="text/javascript">
			//checkbox 全选/取消全选
			var isCheckAll = false;
			function swapCheck() {
				if (isCheckAll) {
					$("input[type='checkbox']").each(function() {
						this.checked = false;
					});
					isCheckAll = false;
				} else {
					$("input[type='checkbox']").each(function() {
						this.checked = true;
					});
					isCheckAll = true;
				}
			}
		</script>
		<script type="text/javascript">
			$(function () {
				var $del=$("#delete");
				$del.click(function () {
					var $form=$("#form");
					$form.submit();
				});

			});
		</script>

	</head>
	<body style="background-color: #F5FDF9;">

		<!-- 导航栏部分 -->
		<div th:replace="~{manager/common/commons::topbar}"></div>


		<!-- 主体部分 -->
		<div style="margin-top: 5px;width: 100%;position:absolute;top:63px;bottom: 0;">
			<!-- 左导航栏 -->
			<div th:replace="~{manager/common/commons::left}"></div>
			<!--显示部分-->
			<div style="width: 85%;text-align: center;margin-top: 5px;float: left;">
				<!-- 第一行 -->
				<div style="width:100%;margin-top: 5px;padding: 3px;">
					<div style="float: left;margin-right: 10px;margin-bottom: 5px;"><button type="button" id="delete" class="btn btn-danger" style="outline: none;">批量删除</button></div>
					<div style="float: left;margin-right: 20px;"><button type="button" class="btn btn-warning" id="insert" style="outline: none;">增加药材</button></div>

					<form th:action="@{/manager/select_med}">
					<div style="float: left;line-height: 30px;margin-right: 5px;margin-left: 180px;">
						<p style="float: left;">
							ID：
						</p>
						<input name="id" placeholder="请输入药材编号" type="text" style="border-radius: 10px;border-width: 1px;outline: none;"/>
					</div>
					<div style="float: left;line-height: 30px;margin-right: 5px;">
						<p style="float: left;">
							名称：
						</p>
						<input name="name" placeholder="请输入药材名称" type="text" style="border-radius: 10px;border-width: 1px;outline: none;"/>
					</div>
					<div style="float: left;line-height: 30px;margin-right: 5px;">
						<p style="float: left;">
							类别：
						</p>
						<input name="type" placeholder="请输入药材类别" type="text" style="border-radius: 10px;border-width: 1px;outline: none;"/>
					</div>
					<div style="float: left;">
						<input type="submit" class="btn btn-info" style="outline: none;" value="查询"/>
					</div>
					</form>

				</div>

				<form id="form" th:action="@{/manager/delete_medicine_all}">
				<!-- 表格信息-->
				<div>
					<table class="table table-bordered table-hover"
						   data-pagination="true"
						   data-side-pagination="client"
						   data-page-size="1">
						<thead>
						<tr class="success">
							<th style="background-color:#D1FDDE;text-align:center;border:none;"><input type="checkbox" id="checkAll" onclick="swapCheck()" name="checkAll" /></th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">药材编号</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">药材名称</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">药材规格</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">药材类别</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">药材单价</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">药材有效期</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">药材图片</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">药材描述</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">药材库存</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">操作</th>
						</tr>
						</thead>
						<tbody>
						<tr th:each="medicine:${medicines}">
							<td style="text-align:center;"><input type="checkbox"  name="checkItem" th:value="${medicine.getId()}" /></td>
							<td th:text="${medicine.getId()}"></td>
							<td th:text="${medicine.getName()}"></td>
							<td th:text="${medicine.getSpecif()}"></td>
							<td th:text="${medicine.getType()}"></td>
							<td th:text="${medicine.getPrice()}"></td>
							<td th:text="${#dates.format(medicine.getPeriodOfValidity(),'yyyy-MM-dd')}"></td>
							<td><a th:href="@{${medicine.getImage()}}">图片</a></td>
							<td th:text="${medicine.getIntroduce()}"></td>
							<td th:text="${medicine.getAmount()}"></td>
							<td style="text-align:center;width: 150px;">
								<a type="button" class="btn btn-danger" th:href="@{/manager/delete_medicine(id=${medicine.getId()})}" style="float: left;margin-right: 5px;outline: none;">删除</a>
								<button type="button"  class="btn btn-success modify"style="outline: none;">修改</button>
							</td>
						</tr>

						</tbody>
					</table>
				</div>
				</form>

				<!-- 分页信息 -->
				<div class="panel-footer" style="text-align: center;background-color: #F5FDF9;border: none;">
					<nav>
						<ul class="pagination pagination-sm">

							<li class="disabled">
								<a href="#" aria-label="Previous">
									<span aria-hidden="true">«</span>
								</a>
							</li>
							<li th:class="${now_page==page ? 'active':'nav-link'}" th:each="page:${pages}">
								<a th:href="@{/manager/page_medicine(page=${page})}" th:text="${page}"></a>
							</li>
							<li>
								<a href="#" aria-label="Next">
									<span aria-hidden="true">»</span>
								</a>
							</li>
						</ul>
					</nav>
				</div>


			</div>

		</div>

		<!-- 新增药品增弹出框 -->
		<div class="tip" id="tip1" style=" display:none;">
			<form th:action="@{/manager/add_medicine}">
			<div class="tip_title">
				<img src="static/img/植物.png" style="float: left;width: 5%;" /><span>添加药材</span><a>x</a></div>
			<div class="tip_info">
				<div class="input-group" style="margin-bottom: 10px;">
					<span class="input-group-addon">药材名称</span>
					<input type="text" name="name" class="form-control" placeholder="请输入药材名称">
				</div>

				<div class="input-group" style="margin-bottom: 10px;">
					<span class="input-group-addon">药材规格</span>
					<input type="text" name="specif" class="form-control" placeholder="请输入药材规格">
				</div>

				<div class="input-group" style="margin-bottom: 10px;">
					<span class="input-group-addon">药材类别</span>
					<input type="text" name="type" class="form-control" placeholder="请输入药材类别">
				</div>

				<div class="input-group" style="margin-bottom: 10px;">
					<span class="input-group-addon">药材单价</span>
					<input type="text" name="price" class="form-control" placeholder="请输入药材单价">
				</div>

				<div class="input-group" style="margin-bottom: 10px;">
					<span class="input-group-addon">药材库存</span>
					<input type="text" name="amount" class="form-control" placeholder="请输入药材库存">
				</div>
				<div class="input-group" style="margin-bottom: 10px;">
					<span class="input-group-addon">图片地址</span>
					<input type="text" name="image" class="form-control" placeholder="请输入图片地址">
				</div>

				<div class="input-group" style="margin-bottom: 10px;">
					<span class="input-group-addon">药材有效期</span>
					<input type="text" name="periodOfValidity" class="form-control" placeholder="请输入药材有效期">
				</div>
				<textarea name="introduce"   cols="40"   rows="4"   style="OVERFLOW:   hidden" placeholder="请输入药材描述"></textarea>

				<div class="tip_button" style="margin-top: 10px;">
					<center>
					<input type="submit" value="确定" name="sure" class="sure" style="background-color: yellow;border-radius: 5px;border: none;"/>
					<!--<button  value="取消" id="cancel1" name="cancel" class="cancel" style="background-color: skyblue;border-radius: 5px;border: none;">取消</button>-->
					</center>
				</div>
			</div>
			</form>
		</div>

		<!--修改药品弹出框-->
		<div class="tip" id="tip2" style=" display:none;">
			<form th:action="@{/manager/modify_medicine}">
			<div class="tip_title">
				<img src="static/img/植物.png" style="float: left;width: 5%;" /><span>修改药品</span><a>x</a></div>
			<div class="tip_info">
				<div class="input-group" style="margin-bottom: 10px;">
					<span class="input-group-addon">药材编号</span>
					<input type="text" name="id" class="form-control" placeholder="请输入药材名称">
				</div>
				<div class="input-group" style="margin-bottom: 10px;">
					<span class="input-group-addon">药材名称</span>
					<input type="text" name="name" class="form-control" placeholder="请输入药材名称">
				</div>

				<div class="input-group" style="margin-bottom: 10px;">
					<span class="input-group-addon">药材规格</span>
					<input type="text" name="specif" class="form-control" placeholder="请输入药材规格">
				</div>

				<div class="input-group" style="margin-bottom: 10px;">
					<span class="input-group-addon">药材类别</span>
					<input type="text" name="type" class="form-control" placeholder="请输入药材类别">
				</div>

				<div class="input-group" style="margin-bottom: 10px;">
					<span class="input-group-addon">药材单价</span>
					<input type="text" name="price" class="form-control" placeholder="请输入药材单价">
				</div>

				<div class="input-group" style="margin-bottom: 10px;">
					<span class="input-group-addon">药材有效期</span>
					<input type="text" name="periodOfValidity" class="form-control" placeholder="请输入药材库存">
				</div>
				<div class="input-group" style="margin-bottom: 10px;">
					<span class="input-group-addon">图片地址</span>
					<input type="text" name="image" class="form-control" placeholder="请输入图片地址">
				</div>

				<div class="input-group" style="margin-bottom: 10px;">
					<span class="input-group-addon">药材库存</span>
					<input type="text" name="amount" class="form-control" placeholder="请输入药材有效期">
				</div>
				<textarea name="introduce"   cols="40"   rows="4"   style="OVERFLOW:   hidden" placeholder="请输入药材描述"></textarea>

				<div class="tip_button" style="margin-top: 10px;">
					<center>
						<input type="submit" value="修改" name="sure" class="sure" style="background-color: yellow;border-radius: 5px;border: none;"/>
					</center>
<!--					<button type="text" value="取消" id="cancel2"  class="cancel" style="background-color: skyblue;border-radius: 5px;border: none;">取消</button>-->
				</div>
			</div>
			</form>
		</div>



		<script>
			$(function(){
				function initTableCheckbox() {
					var $thr = $('table thead tr');
					var $checkAllTh=$('table thead th:first');


					/*全选或全不选事件*/
					var $checkAll = $thr.find('#checkAll');
					$checkAll.click(function(event){
						/*将所有行的选中状态设成全选框的选中状态*/
						$tbr.find('input').prop('checked',$(this).prop('checked'));
						/*并调整所有选中行的CSS样式*/
						if ($(this).prop('checked')) {
							$tbr.find('input').parent().parent().addClass('warning');
						} else{
							$tbr.find('input').parent().parent().removeClass('warning');
						}
						/*阻止向上冒泡，以防再次触发点击操作*/
						event.stopPropagation();
					});


					/*点击全选框所在单元格时也触发全选框的点击操作*/
					$checkAllTh.click(function(){
						$(this).find('input').click();
					});


					/*点击每一行的选中复选框时*/
					var $tbr=$('table tbody tr');
					$tbr.find('input').click(function(event){
						/*调整选中行的CSS样式*/
						$(this).parent().parent().toggleClass('warning');
						/*如果已经被选中行的行数等于表格的数据行数，将全选框设为选中状态，否则设为未选中状态*/
						$checkAll.prop('checked',$tbr.find('input:checked').length == $tbr.length ? true : false);
						/*阻止向上冒泡，以防再次触发点击操作*/
						event.stopPropagation();
					});


					/*点击增加药品弹出框*/
					var $insert=$("#insert");
					var $tip1=$("#tip1");
					$insert.click(function (e) {
						$tip1.css("display","block");
					});



					/*点击修改药品弹出框*/
					var $modify=$(".modify");
					var $tip2=$("#tip2");
					$modify.click(function (e) {
						$tip2.css("display","block");
						//表单的tr
						var $parent=$(this).parent().parent().children();
						var $input=$("#tip2 input");
						var $text=$("#tip2 textarea");
						for (var i = 1; i <=7; i++) {
							$input[i-1].value=$parent[i].innerText;
						}
						$text.val($parent[8].innerText);
						$input[7].value=$parent[9].innerText;
					});


				}
				initTableCheckbox();
			});
		</script>



	</body>
</html>